<template>
  <div class="home">
    <CusTable v-model="table">
      <template #name="text">{{ text }}+插槽</template>
    </CusTable>
  </div>
</template>

<script>
// @ is an alias to /src
import CusTable from '@/packages/cus-table'

export default {
  name: 'HomeView',
  components: {
    CusTable,
  },
  data() {
    let data = []
    for (let i = 0; i < 10; i++) {
      data.push({
        date: '2022-04-13 10:20',
        'index': i,
        name: '韩振东' + i,
        sex: i % 2 == 0 ? '男' : '女',
        age: i * 2,
        address: '济南市',
      })
    }
    return {
      /*table对象支持antd的所有属性*/
      table: {
        'data-source': data,
        border: true,
        stripe: true,
        height: 400,
        lazy: true,
        rowKey: 'index',
        query: { pageSize: 3 },
        loading: false,
        request: () => {
          this.table.loading = true
          this.http(this.table.query)
              .then((res) => {
                console.log('res', res)
                this.table['data-source'] = res.data
                this.table.page.total = res.total
                this.table.loading = false
              })
              .catch(() => {
                this.table.loading = false
              })
        },
        columns: [
          {
            title: '#',
            type: 'indexColumn',
            width: 80,
            fixed: true,
            customRender: function(text) {
              return text.index + 1
            },
          },
          { title: '日期', dataIndex: 'date' },
          {
            title: '姓名',
            dataIndex: 'name',
            width: 80,
            scopedSlots: { customRender: 'name' },
            sortable: true,
          },
          {
            title: '性别',
            dataIndex: 'sex',
            filters: [
              { text: '男', value: '男' },
              { text: '女', value: '女' },
            ],
          },
          {
            title: '年龄',
            dataIndex: 'age',
          },
          {
            title: '地址',
            dataIndex: 'address',
            showOverflowTooltip: true,
          },
          {
            title: '操作',
            type: 'action',
          },
        ],
        page: {
          enable: true,
          height: 50,
          total: 100,
          'show-size-changer': true,
        },
        /*操作列 直接编辑删除 一键回调*/
        actions: {
          enable: true,
          fixed: 'right',
          onEdit: (row) => {
            this.$notification.open({
              message: '编辑',
              description: JSON.stringify(row),
              icon: <a-icon type="smile" style="color: #108ee9" />,
            })
          },
          onDel: (row) => {
            this.$notification.open({
              message: '删除',
              description: JSON.stringify(row),
              icon: <a-icon type="smile" style="color: #108ee9" />,
            })
          },
        },
        /*增加支持分页变动 选择项变动事件 并且antd的 所有事件 */
        on: {
          selectionChange: (keys, rows) => {
            this.$notification.open({
              message: '选择的行',
              description: JSON.stringify(rows),
              icon: <a-icon type="smile" style="color: #108ee9" />,
            })
            console.log('选择的行', rows)
          },
          change: (page) => {
            console.log('页码改变:', page)
          },
          showSizeChange: (size) => {
            console.log('size改变:', size)
          },
        },
      },
    }
  },
  methods: {
    http(query) {
      // 模拟一个 http 请求
      return new Promise((reslove) => {
        setTimeout(() => {
          let data = []
          for (let i = 0; i < query.pageSize; i++) {
            data.push({
              'index': i,
              date: '2021-02-03',
              name: '韩振东' + i,
              sex: i % 2 == 0 ? '男' : '女',
              age: i * 2,
              address: '济南市' + i,
            })
          }
          reslove({ data: data, total: 100 })
        }, 1000)
      })
    },
  },
}
</script>
